<template>
    <div class="main-header">
        <div>
            <p class="name-field">Hi~ 我是小游匣</p>
            <p class="desc-field">无论是想探索小众秘境，还是解锁当地特色美食，我都能为您量身定制行程哦～✨</p>
        </div>
        <div>
            <img src="@/assets/desc-field.png" alt="">
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less"> 
    .main-header{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        padding-top: 30px;
        padding-bottom: 10px;
        img{
            width: 100%;
            object-fit: fill;
        }
        .name-field{
            font-family: 'WenXinXiLeTi', sans-serif;
            font-size: 24px;
            color: #165DFF;
            text-shadow: 2px 2px 4px rgba(255,255,255,0.5);
            letter-spacing: 2px;
            transform: rotate(-1deg);
            animation: float 3s ease-in-out infinite;
        }
        .desc-field{
            font-family: 'WenXinXiLeTi', sans-serif;
            font-weight: bold;
            line-height: 2;
        }
    }

    /* 添加漂浮动画增强可爱风格 */
    @keyframes float {
        0% { transform: translateY(0px) rotate(-1deg); }
        50% { transform: translateY(-5px) rotate(1deg); }
        100% { transform: translateY(0px) rotate(-1deg); }
    }
</style>